import Bookmarks, { withLocalStorage } from '@/components/widgets/Bookmarks';
import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import React, { useRef, useState, useEffect } from 'react';
import styles from './index.less';
import cls from 'classnames';
import { Popconfirm,Switch } from 'antd';
import {
  getBookmarksByCode,
  addBookmark,
  updateBookmark,
  deleteBookmark,
} from '@/services/bookmarkServices';
import { connect } from 'umi';

const BookmarkPanel = ({ code }) => {
  // const LocalStorageBookmark = withLocalStorage(Bookmarks);
  const [bookmarkList, setBookmarkList] = useState([]);
  const [indexForRefresh, setIndexForRefresh] = useState(1);
  const [loop, setChangeLoop] = useState(false);
  const addButtonRef = useRef();
  const clearButtonRef = useRef();
  const projCodeRef = useRef();
  function handleAddClick() {
    addButtonRef.current && addButtonRef.current.click();
  }

  function handleClearClick() {
    clearButtonRef.current && clearButtonRef.current.click();
  }

  useEffect(() => {
    if (!code) return;
    projCodeRef.current = code;
    getBookmarksByCode({ code }).then(data => {
      // console.log(data);
      setBookmarkList(data);
    });
  }, [code, indexForRefresh]);

  const handleAdd = bookmark => {
    addBookmark({ ...bookmark, code: projCodeRef.current }).then(data => {
      console.log(data);
      setIndexForRefresh(e => e + 1);
    });
  };

  const handleRename = (preBookmark, curBookmarkName) => {
    updateBookmark({ ...preBookmark, name: curBookmarkName }).then(data => {
      console.log(data);
      setIndexForRefresh(e => e + 1);
    });
  };

  const handleDelete = bookmark => {
    deleteBookmark({ objectId: bookmark.objectId }).then(data => {
      console.log(data);
      setIndexForRefresh(e => e + 1);
    });
  };
  const setLoop = (value) => {
     console.log(value)
     setChangeLoop(loop=>loop=value);
  };
  return (
    <div
      className={cls('side-panel2', styles.bookMark)}
      style={{
        position: 'absolute',
        right: 498,
        bottom: 25,
        width:400
      }}
    >
      <div className="side-panel2-title">
        工点工况
         <Switch
          style={{ float:'right',marginTop:'15px',marginRight:'20px'}}
          size="small"
          onChange={value => {
            setLoop(value)
          }}
        /> 
    </div>
      <div
        className={cls('side-panel2-body', styles.content2)}
        style={{ padding: '16px 24px 0', height: 240 }}
      >
        <div className={styles.content}>
          <Bookmarks
            items={bookmarkList}
            listType="text"
            loop={loop}
            style={{
              backgroundColor: 'transparent',
              color: '#fff',
            }}
            addButtonRef={addButtonRef}
            clearButtonRef={clearButtonRef}
            addButton={null}
            clearButton={null}
            allowClear
            onRename={handleRename}
            onDelete={handleDelete}
            onAdd={handleAdd}
          ></Bookmarks>
        </div>
        <div className={cls(styles.bookMarkAdd)} onClick={handleAddClick}>
          新建
        </div>
      </div>
    </div>
  );
};

// export default BookmarkPanel;
export default connect(({ app }) => {
  return {
    code: app.curProjId,
  };
})(BookmarkPanel);
